import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
import TableControls from '#cpt/temp/TableControls'
import Controls from '#cpt/temp/Controls'
import Delete from '#cpt/temp/Delete'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page					= $Lazy.load(()=>import('#tp/page/page-container'))
const PrinterSetModal 		= $Lazy.state(()=>import('#private/pages/printer-set-modal'), 1)
const RelevanceTempModal 	= $Lazy.state(()=>import('./cpt/relevance-temp-modal'), 1)
//
const $cache 				= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label: '打印机名称',		name: 'keyword' },
		],
		// 提交表单列表
		formData : [
			{ label: '打印机名称',		name: 'printer_name', 		required:true, full:true },
			{ label: '打印机型号',		name: 'printer_model', 		required:true, full:true },
			{ label: '打印机类型',		name: 'printer_type', 		required:true, full:true, type:'select',idStr:'code'},
			{ label: '打印机代码',		name: 'printer_code', 		required:true, full:true },
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.getSelect()
		this.fetch()
	}
	
	getSelect = () => {
		const { formData } = this.state
		
		$cache.then( async f => {
			const dic = await f.getDicCache({ code: [ 50000, 50001 ]})
			// 打印机类型
			$fn.setRow(formData, 'printer_type', dic['50000'])
			//
			this.setState({ formData })
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'printer/index')
	
	// 表单
	cols = [
		{ title: '序号', 		dataIndex: 'id', 					width:200 },
		{ title: '打印机名称', 	dataIndex: 'printer_name', 			width:200 },
		{ title: '类型', 		dataIndex: 'printer_type_name', 	...$fn.table.status },
		{ title: '打印机型号', 	dataIndex: 'printer_model', 		...$fn.table.time },
		{ title: '模板名称', 	dataIndex: 'printer_template_name', ...$fn.table.time },
		TableControls.controls.call(this,{width:200})
	]
	// 表格操作按钮
	table_controls = (text,{ uuid }) => {
		return [
			TableControls.edit.call(this, 'printer/info', { uuid }),				// 编辑
			this.onDel([ uuid ]),														// 删除
			TableControls.click.call(this, '关联模板', ()=> this.relevanceTempModalRef.open(uuid) )					// 关联模板
		]
	}
	// 操作按钮
	controls = () => {
		return [
			Controls.add.call(this),											// 添加
			this.onDel(),
			TableControls.click.call(this, '打印机设置', ()=> this.printerSetModal.open(), { ghost:true} )				// 打印机设置
		]
	}
	// 删除
	onDel = uuid => Delete.call(this, 'printer/delete', { uuid, isKeys: !uuid, onComplete:()=>$fn.dataRemove('printer') })
	
	render(){
		return (
			<>
				<Page title='打印机管理' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ api: 'printer/add', editApi:'printer/edit', onComplete:()=>{
					$fn.dataRemove('printer')
				} }) }
				{/* 关联模板 */}
				<RelevanceTempModal onRef={ref=>this.relevanceTempModalRef=ref}/>
				{/* 打印机设置 */}
				<PrinterSetModal onRef={ref=>this.printerSetModal=ref} />
			</>
		)
	}
}

export default Index